<template>
  <div>
    <div class="charts">
      <el-button type="primary" plain @click="gocolumn">柱状图</el-button>
      <el-button type="primary" plain @click="gosector">扇形图</el-button>
      <el-button type="primary" @click="hide">隐藏图表</el-button>
    </div>
    <div>
      <column v-show="iscolumn" :datalist="datalist_c"></column>
      <sector v-show="issector" :datalist="datalist"></sector>
    </div>
  </div>
</template>
<script>
import column from "@/components/Analysis/charts/column";
import sector from "@/components/Analysis/charts/sector";
export default {
  components: { column, sector },
  props:["datalist","datalist_c"],
  data() {
    return {
      iscolumn: false,
      issector: false,
    };
  },
  methods: {
    gocolumn() {
      if (this.$data.iscolumn === false) {
        this.$data.iscolumn = true;
        this.$data.issector = false;
      }
    },
    gosector() {
      if (this.$data.issector === false) {
        this.$data.iscolumn = false;
        this.$data.issector = true;
      }
    },
    hide() {
      this.$data.iscolumn = false;
      this.$data.issector = false;
    },
  },
};
</script>
<style scoped>
.charts {
  display: flex;
  justify-content: space-between;
  height: 40px;
  width: 700px;
}
</style>
